<template>
    <div class="car">
        <div class="input">
            <div>
                <span>搜索品牌，车型</span>
            </div>
        </div>
        <div class="search">
            <ul class="list">
                <li>
                    <span class="iconfont icon-icon"></span>
                    <p>销量排行</p>
                </li>
                <li>
                    <span class="iconfont icon-icon1"></span>
                    <p>上市新车</p>
                </li>
                <li>
                    <span class="iconfont icon-icon2"></span>
                    <p>降价排行</p>
                </li>
                <li>
                    <span class="iconfont icon-fangdajing"></span>
                    <p>条件选车</p>
                </li>
            </ul>
        </div>
        <div class="select">
            <div class="word">
                <span>便捷选车</span>
            </div>
            <div class="car">
                <div>
                    <img src="@/assets/img/aodi.png" alt="">
                    <p>奥迪</p>
                </div>
                <div>
                    <img src="@/assets/img/别克.png" alt="">
                    <p>别克</p>
                </div>
                <div>
                    <img src="@/assets/img/长安.png" alt="">
                    <p>长安</p>
                </div>
                <div>
                    <img src="@/assets/img/丰田.png" alt="">
                    <p>丰田</p>
                </div>
            </div>
            <div class="price">
                <ul class="list">
                    <li>
                        十万以下
                    </li>
                    <li>
                        10-15万
                    </li>
                    <li>
                        15-20万
                    </li>
                    <li>
                        20-30万
                    </li>
                </ul>
                
            </div>
            <div class="condition">
                    <ul class="list">
                        <li>轿车</li>
                        <li>SUV</li>
                        <li>新能源</li>
                        <li>更多条件</li>
                    </ul>
            </div>
            <div class="word">
                <span>猜你喜欢</span>
            </div>
            <div class="like">
                <div>
                    <img src="@/assets/img/长安.jpg" alt="">
                    <p>长安</p>
                </div>
                <div>
                    <img src="@/assets/img/星锐.jpeg" alt="">
                    <p>星锐</p>
                </div>
                <div>
                    <img src="@/assets/img/奔驰.jpeg" alt="">
                    <p>奔驰</p>
                </div>
            </div>
            <div class="letter">
                <span>A</span>
            </div>
            <div class="cars">
                <ul class="list">
                    <li>
                        <img src="@/assets/img/aodi.png" alt="">
                        <span>奥迪</span>
                    </li>
                    <li>
                        <img src="@/assets/img/aian.png" alt="">
                        <span>埃安</span>
                    </li>
                    <li>
                        <img src="@/assets/img/aici.png" alt="">
                        <span>爱驰</span>
                    </li>
                    <li>
                        <img src="@/assets/img/aito.png" alt="">
                        <span>AITO</span>
                    </li>
                    <li>
                        <img src="@/assets/img/aweita.png" alt="">
                        <span>阿维塔</span>
                    </li>
                    <li>
                        <img src="@/assets/img/keche.png" alt="">
                        <span>安凯客车</span>
                    </li>
                </ul>
            </div>
        </div>
        
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    .car{
        // width: 100%;
        .input{
            div{
                width: 220px;
                height: 40px;
                margin-top: 20px;
                margin-left: 70px;
                border-radius: 10px;
                background-color: #FFFF;
                span{
                    line-height: 40px;
                    padding-left: 50px;
                    color: #DBDEE5;
                }
            }
        }
        .search{
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            
            .list{
                display: flex;
                li{
                    span{
                        padding-left: 35px;
                    }
                    p{
                        padding-top: 10px;
                        padding-left: 15px;
                    }
                }
            }
        }
        .select{
            // width: 100%;
            height: 100%;
            background-color: #F6F9FE;
            margin-top: 20px;
            border-radius: 10px;
            .word{
                padding-top: 20px;
                padding-left: 20px;
                span{
                    font-size: 15px;
                    font-weight: 700;
                }
            }
            .car{
                display: flex;
                div{
                    display: flex;
                    flex-direction: column;
                    width: 90px;
                    height: 90px;
                    background-color: #FFFF;
                    margin-top: 15px;
                    margin-left: 10px;
                    border-radius: 10px;
                    img{
                        width: 70px;
                        height: 50px;
                        padding-top: 7px;
                        padding-left: 7px;
                    }
                    p{
                        padding-left: 27px;
                        padding-top: 10px;
                    }
                }
            }
            .price{
                .list{
                    display: flex;
                    margin-top: 15px;
                    li{
                        width: 70px;
                        height: 30px;
                        background-color: #F8F2F2;
                        line-height: 30px;
                        padding-left: 6px;
                        margin-left: 10px;
                        border-radius: 10px;
                    }
                }
            }
            .condition{
                .list{
                    display: flex;
                    margin-top: 15px;
                    li{
                        width: 70px;
                        height: 30px;
                        background-color: #EBF2FC;
                        line-height: 30px;
                        padding-left: 10px;
                        margin-left: 10px;
                        border-radius: 10px;
                    }
                }
            }
            .like{
                display: flex;
                div{
                    width: 110px;
                    height: 120px;
                    background-color: #FFFF;
                    margin-left: 13px;
                    margin-top: 20px;
                    border-radius: 10px;
                    display: flex;
                    flex-direction: column;
                    img{
                        width: 100px;
                        height: 80px;
                        padding-left: 5px;
                        padding-top: 5px;
                    }
                    p{
                        padding-top: 10px;
                        padding-left: 35px;
                    }
                }
            }
            .letter{
                padding-left: 20px;
                padding-top: 20px;
                span{
                    color: #969DAD;
                }
            }
            .cars{
                width: 360px;
                height: 350px;
                background-color: #FFFFFF;
                border-radius: 10px;
                margin-left: 8px;
                margin-top: 16px;
                .list{
                    li{
                        width: 360px;
                        height: 40px;
                        margin-top: 8px;
                        img{
                            width: 100px;
                            height: 40px;
                        }
                        span{
                            padding-left: 10px;
                        }
                    }
                }
            }
        }
    }
</style>